<template>
  <div>
    <h1> 这波展示一下 单tag</h1>
    <HelloWorld msg="Welcome to Your Vue.js App" id="helloworld"/>
    <!--    <input v-model="page">-->
    <!--    <button @click=movePage()>go</button> ||-->
    <!--    <button @click=nextPage()>next</button>-->
    <div id="imgList">
      <el-row :gutter="20">
        <el-col :lg="{ span:4 }" v-for="img in imgs_data" :key="img.id" :offset="0" >
          <div class="grid-content ep-bg-purple">
            <div class="common-layout">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <el-row :gutter="20">
                      <el-col :span="12" class="img_id_txt"> <span>{{ img.id }}</span> </el-col>
                      <el-col :span="12"> <el-button class="primary" @click=toBigImgPage(img.id) >查看详情</el-button> </el-col>
                    </el-row>
                  </div>
                </template>
                <!--fit="scale-down" 是等比例缩小适应容器   loading="lazy" 懒加载   -->
                <div><el-image class="small_img" :src=getImgBlobUrl(img.img) fit="cover" loading="none" /></div>
              </el-card>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <input v-model="page">
    <button @click=movePage()>go</button> ||
    <button @click=nextPage()>next</button>
  </div>
</template>
<script>
import {inject} from 'vue'
import HelloWorld from "@/components/HelloWorld";
import axios from "axios";
export default {
  data() {
    return {
      imgs_data: [],
      imgs_data4: [],
      myBaseURL: inject('$baseURL'),
      page:1,
      sept:10,
      tag:'dress'
    }
  },
  name: 'MyTag',
  components: {
    HelloWorld
  },
  methods: {
    getPageImgInfo :async function (tag,page,sept){
      let re_data;
      // await 声明等待异步操作执行完毕
      await axios({
        method:'get',
        url:'/search/imgFromTag',
        baseURL:this.myBaseURL,
        //responseType:'json',
        params:{
          tagName: tag,
          page: page,
          sept: sept
        }
      }).then(function(response) {
        let res = response.data
        //res = JSON.stringify(response)
        //console.log(res)
        re_data = res
      });
      return re_data
    },
    toBigImgPage: function (img_id){
      this.$router.push("/imgDetail/"+img_id)
      //window.open(path) // Not allowed to load local resource: <URL>
    },
    getImgBlobUrl: function (img){
      //console.log(img)
      // 使用 base64 展示图片
      const src = "data:image/jpg;base64," + img
      // blob方法需要先将 图片字符串转换成 blob（数组） 比较麻烦
      //const blob = new Blob([img.data], { type: 'img/jpg' })
      //const url = window.URL.createObjectURL(blob)
      return src
    },
    movePage: function (){
      this.getPageImgInfo(this.tag,this.page,this.sept).then(res=>{
        console.log(this.page + "页 新的res")
        console.log(res)
        this.imgs_data = res
      })
    },
    nextPage: function (){
      this.page =  1 + parseInt(this.page)
      this.getPageImgInfo(this.tag,this.page,this.sept).then(res=>{
        console.log(this.page + "页 新的res")
        console.log(res)
        this.imgs_data = res
      })
    }
  },
  mounted: function () {   /* mounted 是在加载页面的同时加载的函数 */
    //console.log("执行了mounted")
    console.log("$baseURL是" + inject('$baseURL'))
    this.getPageImgInfo(this.tag,this.page,this.sept).then(res=>{
      // console.log(res)  ok
      this.imgs_data = res


      //console.log(this.imgs_data)
    })
  }
}

</script>

<style scoped>
.el-header{
  height: 20px;
  /*background-color: aquamarine;*/
}
/*.el-main{*/
/*  background-color: lightpink;*/
/*}*/
.img_con_head{
  vertical-align:bottom;
}
.img_head_txt{
  vertical-align:bottom;
  font-size: 24px;
}
.img_id_txt{
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-header{
  height: 20%;
}
.box-card{
  height: 400px;
}
</style>
